/**
 * Styles that apply to all GFM related forms.
 */

@use "sass:math";

.gfm-commit,
.gfm-commit_range {
  @apply gl-font-monospace;
  font-size: 95%;
}

// Increase specificity to ensure that it is applied
.gfm-project_member.gfm-project_member,
.md a.gfm-project_member {
  padding: 0 2px;
  color: var(--gl-link-mention-text-color-default);
  background-color: var(--gl-link-mention-background-color-default);
  border-radius: $gl-border-radius-base;

  &.current-user {
    color: var(--gl-link-mention-text-color-current);
    background-color: var(--gl-link-mention-background-color-current);
  }
}

.gfm-color_chip {
  display: inline-block;
  line-height: 1;
  margin: 0 0 2px 4px;
  vertical-align: middle;
  border-radius: 3px;

  $chip-size: 0.9em;
  $bg-size: math.div($chip-size, 0.9);
  $bg-pos: $bg-size * 0.5;

  width: $chip-size;
  height: $chip-size;
  background: $white;
  background-image: linear-gradient(135deg, $gray-100 25%, transparent 0%, transparent 75%, $gray-100 0%),
    linear-gradient(135deg, $gray-100 25%, transparent 0%, transparent 75%, $gray-100 0%);
  background-size: $bg-size $bg-size;
  background-position: 0 0, $bg-pos $bg-pos;

  > span {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin-bottom: 2px;
    border-radius: 3px;
    @apply gl-border-1;
    @apply gl-border-solid;
    @apply gl-border-alpha-dark-24;
  }
}

/*
 * MARKDOWN ALERTS - These are completely separate from our Alert component.
 * These are user-generated content, formatted like:
 * > [!note]
 * > Highlights information that users should take into account, even when skimming.
 */
.md .markdown-alert {
  @apply gl-border-0;
  @apply gl-border-l-4;
  @apply gl-border-l-solid;
  @apply gl-pl-4;
  @apply gl-py-2;
  @apply gl-my-5;
  @apply gl-mx-0;

  .markdown-alert-title {
    @apply gl-heading-4;
    @apply gl-mb-2;
  }

  > *:last-child {
    @apply gl-mb-0;
  }

  &.markdown-alert-note {
    border-color: var(--gl-feedback-info-icon-color);

    .markdown-alert-title {
      color: var(--gl-feedback-info-text-color);
    }
  }

  &.markdown-alert-tip {
    border-color: var(--gl-feedback-success-icon-color);

    .markdown-alert-title {
      color: var(--gl-feedback-success-text-color);
    }
  }

  &.markdown-alert-important {
    @apply gl-border-purple-600;

    .markdown-alert-title {
      @apply gl-text-purple-700;
    }
  }

  &.markdown-alert-warning {
    border-color: var(--gl-feedback-danger-icon-color);

    .markdown-alert-title {
      color: var(--gl-feedback-danger-text-color);
    }
  }

  &.markdown-alert-caution {
    border-color: var(--gl-feedback-warning-icon-color);

    .markdown-alert-title {
      color: var(--gl-feedback-warning-text-color);
    }
  }
}